
import { useEffect, useState } from "react";
import { Dropdown, Input, MenuProps, Select, Table } from "antd";
import * as echarts from "echarts";
import dayjs from 'dayjs';
import HomePage_DrawerComponent from "../../../../components/drawer";
import HomePage_HuashengbaSvgComponent from "../../../../components/svg/huaShengBa";
import HomePage_YuanbaoshanSvgComponent from "../../../../components/svg/yuanBaoShan";
import HomePage_LaonianSvgComponent from "../../../../components/svg/laoNian";
import HomePage_LaonianshoufeizhanSvgComponent from "../../../../components/svg/laoNianShouFeiZhan";
import { $ScientificNotation } from "../../../../common/utils";
import openDrawerImage from "../../../../assets/image/左内容展开@2x.png";
import closeDrawerImage from "../../../../assets/image/左内容收起@2x.png";
import plusImage from "../../../../assets/image/icon_plus_square@2x.png";
import minusImage from "../../../../assets/image/icon_minus_square@2x.png";
import lessModule from "./index.module.less";
import HomePage_SuoGuHengDongSvgComponent from "../../../../components/svg/suoGuHengDong";
import HomePage_SuoGu1SvgComponent from "../../../../components/svg/suoGu1";
import HomePage_BaiMaZaSvgComponent from "../../../../components/svg/baiMaZa";
import HomePage_SuoGu2SvgComponent from "../../../../components/svg/suoGu2";
import HomePage_FuLong1SvgComponent from "../../../../components/svg/fuLong1";
import HomePage_FuLong2SvgComponent from "../../../../components/svg/fuLong2";
import HomePage_ChaiXiaLi1SvgComponent from "../../../../components/svg/chaiXiaLi1";
import HomePage_ChaiXiaLi2SvgComponent from "../../../../components/svg/chaiXiaLi2";
import HomePage_ChaiXiaLiHengDongSvgComponent from "../../../../components/svg/chaiXiaLiHengDong";
import HomePage_FuLongHengDongSvgComponent from "../../../../components/svg/fuLongHengDong";
import HomePage_MinZuCun1SvgComponent from "../../../../components/svg/minZuCun1";
import HomePage_MinZuCunHengDongSvgComponent from "../../../../components/svg/minZuCyunHengDong";
import HomePage_MinZuCun2SvgComponent from "../../../../components/svg/minZuCun2";
import HomePage_ZiYiLi1SvgComponent from "../../../../components/svg/ziYiLi1";
import HomePage_ZiYiLi2SvgComponent from "../../../../components/svg/ziYiLi2";
import { $Http } from "../../../../network";

interface powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentEchartsComponentPropsInterface {
    id: string
    indexName: string
    sourceData: object
}
// 主页-变电站供电品质-图表页面-图表组件—echartsLine1组件
const PowerSupplyQualityOfSubstationPage_DrawerContentComponent_ChartsComponent_EchartsLine1Component: React.FC<powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentEchartsComponentPropsInterface> = (props) => {
    let echartsLine1: echarts.ECharts
    const make_xList = () => {
        let xList: Array<string> = []
        let dateTime = new Date().getTime();
        for (let i = 0; i < 3600; i++) {
            i % 3 === 0 && xList.unshift(
                `${dayjs(dateTime - 1000 * i).format("HH:mm:ss")}`)
        }

        draw_echarts(xList)
    }
    const init_echarts = () => {
        echartsLine1 = echarts.init(document.getElementById(props.id) as HTMLElement)
        window.addEventListener("resize", () => {
            echartsLine1.resize();
        })
    }
    const draw_echarts = (xList: Array<string>) => {
        const option = {
            tooltip: {
                trigger: "axis",
                backgroundColor: "rgba(13, 89, 128, 0.9)",
                borderColor: "#17A1E6",
                axisPointer: {
                    lineStyle: {
                        type: "solid",
                        color: "#17A1E6",
                    },
                },
                formatter(params: Array<object>) {
                    return `
                            <div class="${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentEchartsComponent__tooltip"]}">
                                <span>${params[0]["axisValueLabel"]}</span>
                                <div class="${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentEchartsComponent-tooltip__row"]}">
                                    <div class="${lessModule["tooltip-row__legend"]} ${lessModule["tooltip-row__legendLine"]}"></div>
                                    <div>${params[0]["data"]}</div>
                                </div>
                            </div>`;
                },
            },
            grid: {
                top: 40,
                left: 60,
                right: 1,
                bottom: 20,
            },
            xAxis: {
                type: "category",
                data: xList,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(23, 161, 230, 0.5)",
                    },
                },

                axisLabel: {
                    align: "left",
                    color: "#7A8F99",
                    showMinLabel: true,
                    showMaxLabel: true,
                    formatter: (() => {
                        return (item: object, idx: number) => {
                            const isLast = idx === xList.length - 1;
                            const label = isLast ? `{last|${item}}` : item;
                            return label;
                        };
                    })(),
                    interval: xList.length / 4,
                    rich: {
                        last: {
                            width: 0,
                            align: "right",
                        },
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(23, 161, 230, 0.3)",
                    },
                },
                axisTick: {
                    show: false,
                },
            },
            yAxis: {
                type: "value",
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(23, 161, 230, 0.5)",
                    },
                },
                axisLabel: {
                    fontSize: 12,
                    color: "#7A8F99",
                },

                splitLine: {
                    lineStyle: {
                        color: "rgba(23, 161, 230, 0.3)",
                    },
                },
            },
            series: [
                {
                    data: props.indexName === "频率偏差" ? props.sourceData?.["Inline_fre"] : props.indexName === "不平衡度" ? props.id.split("echarts")[1] === "Top" ? props.sourceData?.["Inline_vol_asydeg"] : props.sourceData?.["Inline_cur_neg"] : "",
                    type: "line",
                    color: "#2BEDE6",
                    symbol: "none",
                    smooth: true,
                    animation: false,
                },
            ],
        };

        echartsLine1.setOption(option);
    }

    useEffect(() => {
        init_echarts()
        make_xList()
        return () => {
            echartsLine1?.dispose()
        }
    }, [props.sourceData])

    return (
        <div className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponent-powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent__powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentEchartsComponent"]}`} id={props.id}> </div>
    )
}
// 主页-变电站供电品质-图表页面-图表组件—echartsLine3组件
const PowerSupplyQualityOfSubstationPage_DrawerContentComponent_ChartsComponent_EchartsLine3Component: React.FC<powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentEchartsComponentPropsInterface> = (props) => {
    let echartsLine3: echarts.ECharts

    const make_xList = () => {
        let xList: Array<string> = []
        let dateTime = new Date().getTime();
        for (let i = 0; i < 3600; i++) {
            i % 3 === 0 && xList.unshift(
                `${dayjs(dateTime - 1000 * i).format("HH:mm:ss")}`)
        }

        draw_echarts(xList)
    }
    const init_echarts = () => {
        echartsLine3 = echarts.init(document.getElementById(props.id) as HTMLElement)
        window.addEventListener("resize", () => {
            echartsLine3.resize();
        })
    }
    const draw_echarts = (xList: Array<string>) => {
        const option = {
            tooltip: {
                trigger: "axis",
                backgroundColor: "rgba(13, 89, 128, 0.9)",
                borderColor: "#17A1E6",
                axisPointer: {
                    lineStyle: {
                        type: "solid",
                        color: "#17A1E6",
                    },
                },
                formatter(params: Array<object>) {
                    return `
                        <div class="${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentEchartsComponent__tooltip"]}">
                            <span>${params[0]["axisValueLabel"]}</span>
                            <div class="${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentEchartsComponent-tooltip__row"]}">
                                <div class="${lessModule["tooltip-row__legendLine"]} ${lessModule["tooltip-row__legendA"]}"></div>
                                <div class="${lessModule["tooltip-row__seriesName"]}">${params[0]["seriesName"]}</div>
                                <div>${params[0]["data"]}</div>
                            </div>
                            <div class="${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentEchartsComponent-tooltip__row"]}">
                                <div class="${lessModule["tooltip-row__legendLine"]} ${lessModule["tooltip-row__legendB"]}"></div>
                                <div class="${lessModule["tooltip-row__seriesName"]}">${params[1]["seriesName"]}</div>
                                <div>${params[1]["data"]}</div>
                            </div>
                            <div class="${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentEchartsComponent-tooltip__row"]}">
                                <div class="${lessModule["tooltip-row__legendLine"]} ${lessModule["tooltip-row__legendC"]}"></div>
                                <div class="${lessModule["tooltip-row__seriesName"]}">${params[2]["seriesName"]}</div>
                                <div>${params[2]["data"]}</div>
                            </div>
                        </div>
                      `;
                },
            },
            grid: {
                top: 40,
                left: 60,
                right: 1,
                bottom: 20,
            },
            legend: {
                icon: "block",
                itemWidth: 16,
                itemHeight: 2,
                right: 0,
                itemGap: 32,
                textStyle: {
                    // 图例文字的样式
                    color: "#8FB8CC;",
                    fontSize: "12px",
                },
            },
            xAxis: {
                type: "category",
                data: xList,

                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(23, 161, 230, 0.5)",
                    },
                },

                axisLabel: {
                    align: "left",
                    color: "#7A8F99",
                    showMinLabel: true,
                    showMaxLabel: true,
                    formatter: (() => {
                        return (item: object, idx: number) => {
                            const isLast = idx === xList.length - 1;
                            const label = isLast ? `{last|${item}}` : item;
                            return label;
                        };
                    })(),
                    interval: xList.length / 4,
                    rich: {
                        last: {
                            width: 0,
                            align: "right",
                        },
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(23, 161, 230, 0.3)",
                    },
                },
                axisTick: {
                    show: false,
                },
            },
            yAxis: {
                type: "value",
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(23, 161, 230, 0.5)",
                    },
                },
                axisLabel: {
                    fontSize: 12,
                    color: "#7A8F99",
                },

                splitLine: {
                    lineStyle: {
                        color: "rgba(23, 161, 230, 0.3)",
                    },
                },
            },
            series: [
                {
                    name: "A相",
                    data: props.sourceData?.[props.indexName === "电压偏差" ? "A_vol_eff" : props.indexName === "谐波电压" ? "A_vol_harmcontent" : props.indexName === "谐波电流" ? "A_cur_harmcontent" : ""],
                    type: "line",
                    color: "#FFFF00",
                    symbol: "none",
                    smooth: true,
                    animation: false,
                },
                {
                    name: "B相",
                    data: props.sourceData?.[props.indexName === "电压偏差" ? "B_vol_eff" : props.indexName === "谐波电压" ? "B_vol_harmcontent" : props.indexName === "谐波电流" ? "B_cur_harmcontent" : ""],
                    type: "line",
                    color: "#00FF00",
                    symbol: "none",
                    smooth: true,
                    animation: false,
                },
                {
                    name: "C相",
                    data: props.sourceData?.[props.indexName === "电压偏差" ? "C_vol_eff" : props.indexName === "谐波电压" ? "C_vol_harmcontent" : props.indexName === "谐波电流" ? "C_cur_harmcontent" : ""],
                    type: "line",
                    color: "#FF0000",
                    symbol: "none",
                    smooth: true,
                    animation: false,
                },
            ],
        };

        echartsLine3.setOption(option);
    }

    useEffect(() => {
        init_echarts()
        make_xList()
        return () => {
            echartsLine3?.dispose()
        }
    }, [props.sourceData])
    return (
        <div className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponent-powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent__powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentEchartsComponent"]}`} id={props.id}> </div>
    )
}


// 主页-变电站供电品质-图表页面-图表组件—echartsBar3组件
const PowerSupplyQualityOfSubstationPage_DrawerContentComponent_ChartsComponent_EchartsBar3Component: React.FC<powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentEchartsComponentPropsInterface> = (props) => {

    let echartsBar3: echarts.ECharts
    let xList: Array<number> = []
    const make_xList = () => {
        for (let i = 0; i <= 50; i++) {
            xList.push(i)
        }
    }
    const init_echarts = () => {
        echartsBar3 = echarts.init(document.getElementById(props.id) as HTMLElement)
        draw_echarts()
        window.addEventListener("resize", () => {
            echartsBar3.resize();
        })
    }
    const draw_echarts = () => {
        const option = {
            tooltip: {
                trigger: "axis",
                backgroundColor: "rgba(13, 89, 128, 0.9)",
                borderColor: "#17A1E6",
                axisPointer: {
                    type: "none"
                },
                formatter(params: Array<object>) {
                    return `
                            <div class="${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentEchartsComponent__tooltip"]}">
                                <span>${params[0]["axisValueLabel"]}</span>
                                <div class="${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentEchartsComponent-tooltip__row"]}">
                                    <div class="${lessModule["tooltip-row__legendBar"]} ${lessModule["tooltip-row__legendA"]}"></div>
                                    <div class="${lessModule["tooltip-row__seriesName"]}">${params[0]["seriesName"]}</div>
                                    <div>${params[0]["data"]}</div>
                                </div>
                                <div class="${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentEchartsComponent-tooltip__row"]}">
                                    <div class="${lessModule["tooltip-row__legendBar"]} ${lessModule["tooltip-row__legendB"]}"></div>
                                    <div class="${lessModule["tooltip-row__seriesName"]}">${params[1]["seriesName"]}</div>
                                    <div>${params[1]["data"]}</div>
                                </div>
                                <div class="${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentEchartsComponent-tooltip__row"]}">
                                    <div class="${lessModule["tooltip-row__legendBar"]} ${lessModule["tooltip-row__legendC"]}"></div>
                                    <div class="${lessModule["tooltip-row__seriesName"]}">${params[2]["seriesName"]}</div>
                                    <div>${params[2]["data"]}</div>
                                </div>
                            </div>`;
                },
            },
            grid: {
                top: 40,
                left: 60,
                right: 1,
                bottom: 20,
            },
            legend: {
                icon: "block",
                itemWidth: 16,
                itemHeight: 2,
                right: 0,
                itemGap: 32,
                textStyle: {
                    // 图例文字的样式
                    color: "#8FB8CC",
                    fontSize: "12px",
                },
            },
            xAxis: {
                type: "category",
                data: xList,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(23, 161, 230, 0.5)",
                    },
                },

                axisLabel: {
                    align: "left",
                    color: "#7A8F99",
                    showMinLabel: true,
                    showMaxLabel: true,
                    formatter: (() => {
                        return (item: object, idx: number) => {
                            const isLast = idx === xList.length - 1;
                            const label = isLast ? `{last|${item}}` : item;
                            return label;
                        };
                    })(),
                    interval: 8,
                    rich: {
                        last: {
                            width: 0,
                            align: "right",
                        },
                    },
                },

                axisTick: {
                    show: false,
                },
            },
            yAxis: {
                type: "value",
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(230, 191, 115, 0.3)",
                    },
                },
                axisLabel: {
                    fontSize: 12,
                    color: "#7A8F99",
                },

                splitLine: {
                    lineStyle: {
                        color: "rgba(230, 191, 115, 0.3)",
                    },
                },
            },
            series: [
                {
                    name: "A相",
                    data: props.sourceData?.[props.indexName === "谐波电压" ? "vol_harmamp_A" : props.indexName === "谐波电流" ? "cur_harmamp_A" : ""],
                    type: "bar",
                    color: "#FFFF00",
                    barWidth: 2,
                    animation: false,
                },
                {
                    name: "B相",
                    data: props.sourceData?.[props.indexName === "谐波电压" ? "vol_harmamp_B" : props.indexName === "谐波电流" ? "cur_harmamp_B" : ""],
                    type: "bar",
                    color: "#00FF00",
                    barWidth: 2,
                    animation: false,
                },
                {
                    name: "C相",
                    data: props.sourceData?.[props.indexName === "谐波电压" ? "vol_harmamp_C" : props.indexName === "谐波电流" ? "cur_harmamp_C" : ""],
                    type: "bar",
                    color: "#FF0000",
                    barWidth: 2,
                    animation: false,
                },
            ],
        };

        echartsBar3.setOption(option);
    }

    useEffect(() => {
        make_xList()
    })
    useEffect(() => {
        init_echarts()
        return () => {

            echartsBar3?.dispose()
        }
    }, [props.indexName, props.sourceData])

    return (
        <div className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponent-powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent__powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentEchartsComponent"]}`} id={props.id}> </div>
    )
}

// 主页-变电站供电品质-图表页面-图表组件—表格组件
interface powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentTableComponentPropsInterface {
    indexName: string
    sourceData: object
}
const PowerSupplyQualityOfSubstationPage_DrawerContentComponent_ChartsComponent_TableComponent: React.FC<powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentTableComponentPropsInterface> = (props) => {

    const frequencyDeviationColumnList = [
        {
            title: '指标',
            dataIndex: 'index',
        },
        {
            title: '频率（Hz）',
            dataIndex: 'frequency',
        },
        {
            title: '频率偏差（Hz）',
            dataIndex: 'frequencyDeviation',
        },
        {
            title: '发生时刻',
            dataIndex: 'timeOfOccurrence',
        },
    ]
    const voltageDeviationColumnList = [
        {
            title: '指标',
            dataIndex: 'index',
        },
        {
            title: 'A',
            dataIndex: 'a',
        },
        {
            title: 'B',
            dataIndex: 'b',
        },
        {
            title: 'C',
            dataIndex: 'c',
        },
        {
            title: '发生时刻',
            dataIndex: 'timeOfOccurrence',
        },
    ]
    const frequencyDeviationSourceList = [
        {
            index: "最大值",
            frequency: props.sourceData?.["max_list"]?.[0],
            frequencyDeviation: props.sourceData?.["max_list"]?.[1],
            timeOfOccurrence: props.sourceData?.["max_list"]?.[2]
        },
        {
            index: "平均值",
            frequency: props.sourceData?.["avg_list"]?.[0],
            frequencyDeviation: props.sourceData?.["avg_list"]?.[1]
        },
        {
            index: "最小值",
            frequency: props.sourceData?.["min_list"]?.[0],
            frequencyDeviation: props.sourceData?.["min_list"]?.[1],
            timeOfOccurrence: props.sourceData?.["min_list"]?.[2]
        },
        {
            index: "95%概率最大值",
            frequency: props.sourceData?.["spe_list"]?.[0],
            frequencyDeviation: props.sourceData?.["spe_list"]?.[1],
        },
    ]
    const voltageDeviationSourceList = [
        {
            index: "最大值",
            a: props.sourceData?.["max_list"]?.[0],
            b: props.sourceData?.["max_list"]?.[1],
            c: props.sourceData?.["max_list"]?.[2],
            timeOfOccurrence: props.sourceData?.["max_list"]?.[3]
        },
        {
            index: "平均值",
            a: props.sourceData?.["avg_list"]?.[0],
            b: props.sourceData?.["avg_list"]?.[1],
            c: props.sourceData?.["avg_list"]?.[2]
        },
        {
            index: "最小值",
            a: props.sourceData?.["mun_list"]?.[0],
            b: props.sourceData?.["mun_list"]?.[1],
            c: props.sourceData?.["mun_list"]?.[2],
            timeOfOccurrence: props.sourceData?.["mun_list"]?.[3]
        },
        {
            index: "95%概率最大值",
            a: props.sourceData?.["max_list"]?.[0],
            b: props.sourceData?.["max_list"]?.[1],
            c: props.sourceData?.["max_list"]?.[2],
        },
    ]
    const [columnList, setColumnList] = useState<Array<object>>([])
    const [sourceList, setSourceList] = useState<Array<object>>([])

    const className_tableRow = (record: object, idx: number) => {
        return idx % 2 ? `${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-bottom__tableRow"]}` : ""
    }
    const init_columnList = () => {
        if (props.indexName === "频率偏差") {
            setColumnList([...frequencyDeviationColumnList])
            setSourceList([...frequencyDeviationSourceList])
        } else if (props.indexName === "电压偏差") {
            setColumnList([...voltageDeviationColumnList])
            setSourceList([...voltageDeviationSourceList])
        }
    }

    useEffect(() => {
        init_columnList()
    }, [props.indexName, props.sourceData])
    return (
        <div>
            <Table rowKey={(record, idx) => props.indexName + idx}
                columns={columnList}
                dataSource={sourceList}
                pagination={false}
                rowClassName={className_tableRow}
            />
        </div>
    )
}

// 主页-变电站供电品质-图表页面-图表组件
interface powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentPropsInterface {
    indexName: string
    sourceData: object
}
const PowerSupplyQualityOfSubstationPage_DrawerContentComponent_ChartsComponent: React.FC<powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponentPropsInterface> = (props) => {







    return (
        <div className={`${lessModule["homePagePowerSupplyQualityOfSubstationPage-powerSupplyQualityOfSubstationPageDrawerContentComponent__powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent"]}`}>
            <div className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponent-powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent__top"]}`}
                style={{
                    height: `calc(${["频率偏差", "电压偏差"].includes(props.indexName) ? 467 : ["谐波电压"].includes(props.indexName) ? 375 : ["谐波电流"].includes(props.indexName) ? 395 : ["不平衡度"].includes(props.indexName) && 475} / 1016 * 100%)`,
                    paddingBottom: ["频率偏差", "电压偏差"].includes(props.indexName) ? 30 : ["谐波电压"].includes(props.indexName) ? 55 : ["谐波电流"].includes(props.indexName) ? 75 : ["不平衡度"].includes(props.indexName) ? 38 : 0
                }}>
                <div className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponent-powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent__title"]}`}>
                    <>
                        {
                            ["频率偏差"].includes(props.indexName) &&
                            <>
                                <span>实测频率：</span>
                                <span className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-title__value"]}`}>{$ScientificNotation(props.sourceData?.["Inline_fre"]?.[props.sourceData?.["Inline_fre"].length - 1])} Hz</span>
                            </>
                        }
                        {
                            ["电压偏差"].includes(props.indexName) &&
                            <>
                                <span>电压偏差：</span>
                                <span className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-title__aValue"]}`}>{$ScientificNotation(props.sourceData?.["A_vol_eff"]?.[props.sourceData?.["A_vol_eff"].length - 1])} %</span>
                                <span className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-title__bValue"]}`}>{$ScientificNotation(props.sourceData?.["B_vol_eff"]?.[props.sourceData?.["B_vol_eff"].length - 1])} %</span>
                                <span className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-title__cValue"]}`}>{$ScientificNotation(props.sourceData?.["C_vol_eff"]?.[props.sourceData?.["C_vol_eff"].length - 1])} %</span>
                            </>
                        }
                        {
                            ["谐波电压"].includes(props.indexName) &&
                            <>
                                <span>谐波含量：</span>
                            </>
                        }
                        {
                            ["谐波电流"].includes(props.indexName) &&
                            <>
                                <span>谐波电流含量（A）：</span>
                            </>
                        }
                        {
                            ["不平衡度"].includes(props.indexName) &&
                            <>
                                <span>三相电压不平衡度（%）：</span>
                                <span className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-title__value"]}`}>{$ScientificNotation(props.sourceData?.["Inline_vol_asydeg"]?.[props.sourceData?.["Inline_vol_asydeg"].length - 1])} %</span>
                            </>
                        }
                    </>
                </div>
                <>
                    <>
                        {
                            ["频率偏差", "不平衡度"].includes(props.indexName) && <PowerSupplyQualityOfSubstationPage_DrawerContentComponent_ChartsComponent_EchartsLine1Component id="echartsTop" indexName={props.indexName} sourceData={props.sourceData} />
                        }
                    </>
                    <>
                        {
                            ["电压偏差"].includes(props.indexName) && <PowerSupplyQualityOfSubstationPage_DrawerContentComponent_ChartsComponent_EchartsLine3Component id="echartsTop" indexName={props.indexName} sourceData={props.sourceData} />
                        }
                    </>
                    <>
                        {
                            ["谐波电压", "谐波电流"].includes(props.indexName) && <PowerSupplyQualityOfSubstationPage_DrawerContentComponent_ChartsComponent_EchartsBar3Component id="echartsTop" indexName={props.indexName} sourceData={props.sourceData} />
                        }
                    </>
                </>
                <>
                    {
                        ["谐波电压", "谐波电流"].includes(props.indexName) && <div className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-top__bottomLabel"]}`}
                            style={{ bottom: ["谐波电压"].includes(props.indexName) ? 32 : ["谐波电流"].includes(props.indexName) ? 52 : 0 }}>谐波次数</div>
                    }
                </>
            </div>
            <div className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponent-powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent__bottom"]}`}
                style={{
                    height: `calc(${["频率偏差", "电压偏差"].includes(props.indexName) ? 491 : ["谐波电压"].includes(props.indexName) ? 583 : ["谐波电流"].includes(props.indexName) ? 563 : ["不平衡度"].includes(props.indexName) && 483} / 1016 * 100%)`,
                    padding: ["频率偏差", "电压偏差"].includes(props.indexName) ? "30px 16px 0" : ["谐波电压"].includes(props.indexName) ? "31px 16px 139px" : ["谐波电流"].includes(props.indexName) ? "51px 16px 99px" : ["不平衡度"].includes(props.indexName) ? "31px 16px 39px" : 0
                }}>
                <div className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponent-powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent__title"]}`}>
                    <>
                        {
                            ["谐波电压"].includes(props.indexName) &&
                            <>
                                <span>谐波电压畸变率THDu（%）：</span>
                                <span className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-title__aValue"]}`}>{$ScientificNotation(props.sourceData?.["A_vol_harmcontent"]?.[props.sourceData?.["A_vol_harmcontent"].length - 1])} %</span>
                                <span className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-title__bValue"]}`}>{$ScientificNotation(props.sourceData?.["B_vol_harmcontent"]?.[props.sourceData?.["B_vol_harmcontent"].length - 1])} %</span>
                                <span className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-title__cValue"]}`}>{$ScientificNotation(props.sourceData?.["C_vol_harmcontent"]?.[props.sourceData?.["C_vol_harmcontent"].length - 1])} %</span>
                            </>
                        }
                        {
                            ["谐波电流"].includes(props.indexName) &&
                            <>
                                <span>谐波电流（A）：</span>
                                <span className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-title__aValue"]}`}>{$ScientificNotation(props.sourceData?.["A_cur_harmcontent"]?.[props.sourceData?.["A_cur_harmcontent"].length - 1])} A</span>
                                <span className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-title__bValue"]}`}>{$ScientificNotation(props.sourceData?.["B_cur_harmcontent"]?.[props.sourceData?.["B_cur_harmcontent"].length - 1])} A</span>
                                <span className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-title__cValue"]}`}>{$ScientificNotation(props.sourceData?.["C_cur_harmcontent"]?.[props.sourceData?.["C_cur_harmcontent"].length - 1])} A</span>
                            </>
                        }
                        {
                            ["不平衡度"].includes(props.indexName) &&
                            <>
                                <span>负序电流：</span>
                                <span className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-title__value"]}`}>{$ScientificNotation(props.sourceData?.["Inline_cur_neg"]?.[props.sourceData?.["Inline_cur_neg"].length - 1])} A</span>
                            </>
                        }
                    </>
                </div>
                <>
                    <>
                        {
                            ["频率偏差", "电压偏差"].includes(props.indexName) && <PowerSupplyQualityOfSubstationPage_DrawerContentComponent_ChartsComponent_TableComponent indexName={props.indexName} sourceData={props.sourceData} />
                        }
                    </>
                    <>
                        {
                            ["谐波电压", "谐波电流"].includes(props.indexName) && <PowerSupplyQualityOfSubstationPage_DrawerContentComponent_ChartsComponent_EchartsLine3Component id="echartsBottom" indexName={props.indexName} sourceData={props.sourceData} />
                        }
                    </>
                    <>
                        {
                            ["不平衡度"].includes(props.indexName) && <PowerSupplyQualityOfSubstationPage_DrawerContentComponent_ChartsComponent_EchartsLine1Component id="echartsBottom" indexName={props.indexName} sourceData={props.sourceData} />
                        }
                    </>
                </>
                {/* <>
                    {
                        ["谐波电压"].includes(props.indexName) && <div className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponentChartsComponent-bottom__bottomLabel"]}`}>
                            <span>电压偏差：</span>
                            <span className={`${lessModule["bottom-bottomLabel__aValue"]}`}>{$ScientificNotation(100)} %</span>
                            <span className={`${lessModule["bottom-bottomLabel__bValue"]}`}>{$ScientificNotation(100)} %</span>
                            <span className={`${lessModule["bottom-bottomLabel__cValue"]}`}>{$ScientificNotation(100)} %</span>
                        </div>
                    }
                </> */}
            </div>
        </div>
    )
}
// 主页-变电站供电品质-抽屉内容组件
interface powerSupplyQualityOfSubstationPageDrawerContentComponentPropsInterface {
    siteName: string
    get_isDrawerClose: Function
}
const PowerSupplyQualityOfSubstationPage_DrawerContentComponent: React.FC<powerSupplyQualityOfSubstationPageDrawerContentComponentPropsInterface> = (props) => {

    let [filterSourceList, setFilterSourceList] = useState<Array<object>>([])
    let [sourceData, setSourceData] = useState<object>({})
    let [switchCabinetList, setSwitchCabinetList] = useState<Array<object>>([])
    let [switchCabinetName, setSwitchCabinetName] = useState<string>("")
    let [loopList, setLoopList] = useState<Array<object>>([])
    let [loopName, setLoopName] = useState<string>("")
    let [indexList, setIndexList] = useState<Array<object>>([])
    let [indexName, setIndexName] = useState<string>("")
    let [myInterval, setMyInterval] = useState<any>(null)
    const click_closeDrawer = () => {
        props.get_isDrawerClose()
    }
    const change_switchCabinetName = (value: string) => {
        switchCabinetName = value
        loopList = []
        indexList =[]
        filterSourceList.find((item) => item["cabinet"] === switchCabinetName)?.["figure_list"].forEach((item: string, idx: number) => {
            loopList[idx] = { label: item }

        })
        filterSourceList.find((item) => item["cabinet"] === switchCabinetName)?.["index"].forEach((item: string, idx: number) => {
            indexList[idx] = { label: item }

        })
        loopName = loopList?.[0]?.["label"]
        indexName = indexList?.[0]?.["label"]
        setSwitchCabinetName(switchCabinetName)
        setLoopList([...loopList])
        setIndexList([...indexList])
        setLoopName(loopName)
        setIndexName(indexName)
        http_powerQualityGetAlltrend()
    }
    const change_loopName = (value: string) => {
        loopName = value
        setLoopName(loopName)
        http_powerQualityGetAlltrend()
    }
    const change_indexName = (value: string) => {
        indexName = value
        setIndexName(indexName)
        http_powerQualityGetAlltrend()
    }
    const http_powerQualityGetCab = () => {
        $Http("powerQualityGetCab", { substation_name: props.siteName }).then((res) => {

            filterSourceList = res["monitor_list"]
            
            filterSourceList?.forEach((item: object, idx: number) => {
                switchCabinetList[idx] = { label: item["cabinet"] }
            })
            filterSourceList?.[0]?.["figure_list"]?.forEach((item: string, idx: number) => {
                loopList[idx] = { label: item }
            })
            filterSourceList?.[0]?.["index"]?.forEach((item: string, idx: number) => {
                indexList[idx] = { label: item }
            })
            switchCabinetName = switchCabinetList?.[0]?.["label"]
            loopName = loopList?.[0]?.["label"]
            indexName = indexList?.[0]?.["label"]
            setFilterSourceList([...filterSourceList])
            setSwitchCabinetList([...switchCabinetList])
            setSwitchCabinetName(switchCabinetName)
            setLoopList([...loopList])
            setIndexList([...indexList])
            setLoopName(loopName)
            setIndexName(indexName)
            http_powerQualityGetAlltrend()
        })
    }
    const http_powerQualityGetAlltrend = () => {
        clearInterval(myInterval)
        const func_execute = () => {
            sourceData = {}

            $Http("powerQualityGetAlltrend", { monitor_point: `${switchCabinetName}_${loopName}`, monitor_figure: indexName, substation_name: props.siteName, monitor_time: 3600, start_time: 1689827020 }, "post").then((res) => {
                sourceData = res
                setSourceData({ ...sourceData })
            })
        }
        func_execute()
        myInterval = setInterval(() => {
            func_execute()
        }, 3000)
        setMyInterval(myInterval)
    }
    useEffect(() => {
        http_powerQualityGetCab()
    }, [props.siteName])
    useEffect(() => {
        // 销毁
        return () => {
            clearInterval(myInterval)
            setMyInterval(myInterval)
        }
    }, [sourceData])
    return (
        <div className={`${lessModule["homePagePowerSupplyQualityOfSubstationPage-powerSupplyQualityOfSubstationPageDrawerContentComponent"]}`}>
            <img className={`${lessModule["homePagePowerSupplyQualityOfSubstationPage-powerSupplyQualityOfSubstationPageDrawerContentComponent__closeDrawerImgae"]}`} src={closeDrawerImage} onClick={() => click_closeDrawer()} />
            <div className={`${lessModule["homePagePowerSupplyQualityOfSubstationPage-powerSupplyQualityOfSubstationPageDrawerContentComponent__header"]}`}>
                <div className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponent-header__left"]}`}>
                    <span>开关柜：</span>
                    <Select
                        className={`${lessModule["header-left__switchCabinetSelect"]}`}
                        popupClassName="powerSupplyQualityOfSubstationPageDrawerContentComponent-header__selectDropdown"
                        value={switchCabinetName}
                        options={switchCabinetList}
                        fieldNames={{ value: "label" }}
                        onChange={change_switchCabinetName}
                    />
                    <span>回路：</span>
                    <Select
                        className={`${lessModule["header-left__loopSelect"]}`}
                        popupClassName="powerSupplyQualityOfSubstationPageDrawerContentComponent-header__selectDropdown"
                        value={loopName}
                        options={loopList}
                        fieldNames={{ value: "label" }}
                        onChange={change_loopName}
                    />
                </div>
                <div>
                    <span>指标：</span>
                    <Select
                        className={`${lessModule["powerSupplyQualityOfSubstationPageDrawerContentComponent-header__indexSelect"]}`}
                        popupClassName="powerSupplyQualityOfSubstationPageDrawerContentComponent-header__selectDropdown"
                        value={indexName}
                        options={indexList}
                        fieldNames={{ value: "label" }}
                        onChange={change_indexName}
                    />
                </div>
            </div>
            {
                Object.keys(sourceData).length && <PowerSupplyQualityOfSubstationPage_DrawerContentComponent_ChartsComponent indexName={indexName} sourceData={sourceData} />
            }

        </div>
    )
}

// 主页-变电站供电品质
const HomePage_PowerSupplyQualityOfSubstationPage: React.FC = () => {

    let [siteName, setSiteName] = useState<string>(`${JSON.parse(sessionStorage.homePage_freewayList)[0].label}/${JSON.parse(sessionStorage.homePage_freewayList)[0].options[0].label}`)
    const [isDrawer, setIsDrawer] = useState<boolean>(false)
    const [isPrepareCloseDrawer, setIsPrepareCloseDrawer] = useState<boolean>(false)
    const items: MenuProps['items'] = [
        {
            key: "1",
            label: (<div className={lessModule["scale__dropdown__items"]} onClick={() => setScaleValue(4)}>400%</div>)
        },
        {
            key: "2",
            label: (<div className={lessModule["scale__dropdown__items"]} onClick={() => setScaleValue(2)}>200%</div>)
        },
        {
            key: "3",
            label: (<div className={lessModule["scale__dropdown__items"]} onClick={() => setScaleValue(1.5)}>150%</div>)
        },
        {
            key: "4",
            label: (<div className={lessModule["scale__dropdown__items"]} onClick={() => setScaleValue(1)}>100%</div>)
        },
        {
            key: "5",
            label: (<div className={lessModule["scale__dropdown__items"]} onClick={() => setScaleValue(0.5)}>50%</div>)
        },
        {
            key: "6",
            label: (<div className={lessModule["scale__dropdown__items"]} onClick={() => setScaleValue(0.25)}>25%</div>)
        }
    ]
    let [scaleValue, setScaleValue] = useState<number>(1)
    let [sourceList, setSourceList] = useState<Array<object>>([])
    let [myInterval, setMyInterval] = useState<any>(null)
    const change_siteName = (value: string) => {
        siteName = value
        http_realData()
        setSiteName(value)
    }
    const click_scale = (type: string) => {
        type === "minus" ? scaleValue -= 0.1 : type === "plus" && (scaleValue += 0.1)
        setScaleValue(scaleValue)
    }
    const click_openDrawer = () => {
        setIsDrawer(true)
    }
    const get_isDrawerClose = () => {
        setIsPrepareCloseDrawer(true)
        setTimeout(() => {
            setIsDrawer(false)
            setIsPrepareCloseDrawer(false)
        }, 300);
    }
    const http_realData = () => {
        clearInterval(myInterval)
        const func_execute = () => {

            $Http("realData", { substation_name: siteName }).then((res) => {

                sourceList = res["data"]
                setSourceList([...sourceList])
            })

        }
        func_execute()
        myInterval = setInterval(() => {
            func_execute()
        }, 3000)
        setMyInterval(myInterval)
    }
    useEffect(() => {
        // 销毁
        return () => {
            clearInterval(myInterval)
            setMyInterval(myInterval)
        }
    }, [sourceList])
    useEffect(() => {
        http_realData()
    }, [])
    return (
        <div className={`${lessModule["homePagePowerSupplyQualityOfSubstationPage"]}`}>
            <header className={`${lessModule["homePagePowerSupplyQualityOfSubstationPage-header"]}`}>
                <Select
                    className={`${lessModule["homePagePowerSupplyQualityOfSubstationPage-header__select"]}`}
                    popupClassName="homePagePowerSupplyQualityOfSubstationPage-select__selectDropdown"
                    value={siteName}
                    optionLabelProp="labelProp"
                    onChange={change_siteName}
                    options={JSON.parse(sessionStorage.homePage_freewayList)}
                    fieldNames={{ value: "labelProp" }}
                />
                <div className={`${lessModule["homePagePowerSupplyQualityOfSubstationPage-header__scale"]}`}>
                    <img className={`${lessModule["header-scale__image"]}`} src={minusImage} onClick={() => click_scale("minus")} />
                    <Dropdown overlayClassName={lessModule["header-scale__dropdown"]} menu={{ items }} trigger={['click']} placement="bottom">
                        <span className={`${lessModule["header-scale__value"]}`}>{Math.floor(scaleValue * 100)}%</span>
                    </Dropdown>
                    <img className={`${lessModule["header-scale__image"]}`} src={plusImage} onClick={() => click_scale("plus")} />
                </div>
            </header>
            <main className={`${lessModule["homePagePowerSupplyQualityOfSubstationPage-main"]}`}>
                <>
                    {
                        siteName.split("/")[1] === "花生坝隧道" && <HomePage_HuashengbaSvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "老碾隧道" && <HomePage_LaonianSvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "圆包山隧道" && <HomePage_YuanbaoshanSvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "老碾收费站" && <HomePage_LaonianshoufeizhanSvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "白马匝道收费站" && <HomePage_BaiMaZaSvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "索古修寨隧道洞内横洞变电所（进口）" && <HomePage_SuoGu1SvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "索古修寨隧道洞内横洞变电所" && <HomePage_SuoGuHengDongSvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "索古修寨隧道2#变电所（出口）" && <HomePage_SuoGu2SvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "福隆隧道洞内横洞进口变电所" && <HomePage_FuLongHengDongSvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "福隆隧道洞内1#横洞变电所" && <HomePage_FuLong1SvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "福隆隧道 2#变电所" && <HomePage_FuLong2SvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "柴呷哩隧道 1#变电所" && <HomePage_ChaiXiaLi1SvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "柴呷哩隧道 横洞变电所" && <HomePage_ChaiXiaLiHengDongSvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "柴呷哩隧道 2#变电所" && <HomePage_ChaiXiaLi2SvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "民族村隧道 1#变电所" && <HomePage_MinZuCun1SvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "民族村隧道 横洞变电所" && <HomePage_MinZuCunHengDongSvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "民族村隧道 2#变电所" && <HomePage_MinZuCun2SvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "自一里隧道 1#箱变" && <HomePage_ZiYiLi1SvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
                <>
                    {
                        siteName.split("/")[1] === "自一里隧道 2#变电所" && <HomePage_ZiYiLi2SvgComponent pageName="变电站供电品质" scaleValue={scaleValue} sourceList={sourceList} />
                    }
                </>
            </main>
            <>
                {
                    !isDrawer && <img className={`${lessModule["homePagePowerSupplyQualityOfSubstationPage-openDrawerImgae"]}`} src={openDrawerImage} onClick={() => click_openDrawer()} />
                }
            </>
            <>
                {
                    isDrawer && <HomePage_DrawerComponent top={65} isPrepareCloseDrawer={isPrepareCloseDrawer} get_isDrawerClose={get_isDrawerClose}
                        DrawerContentComponents={<PowerSupplyQualityOfSubstationPage_DrawerContentComponent siteName={siteName} get_isDrawerClose={get_isDrawerClose} />} />
                }
            </>
        </div>

    )
}

export default HomePage_PowerSupplyQualityOfSubstationPage